<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
  <style>
    body {
      background-color: #01122B;

    }

    .name {
      position: absolute;
      left: 0;
      top: 0;
      height: 45px;
      line-height: 45px;
      text-align: center;
      color: #fff;
      font-size: 14px;
      width: 80px;
      z-index: 10;
      background-color: #01122B;
      border-right: 1px solid #aaa;
    }

    .left {
      position: absolute;
      left: 0;
      top: 45px;
      bottom: 17px;
      width: 80px;
      background: #73ffd5;
      border-top: 1px solid #aaa;
      z-index: 10;
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: space-around;
      flex-direction: column;
    }

    .left>li {
      font-size: 12px;
      color: #555;
      text-align: center;
      margin: 0;
      padding: 0
    }

    .line {
      position: absolute;
      left: 80px;
      top: 0;
      border-bottom: 1px solid #aaa;
      height: 1px;
      right: 0;
      z-index: 1;
      height: 22px;
      text-align: center;
      line-height: 22px;
      color: #666;
      font-size: 12px;
    }
  </style>
</head>

<body>
  <div style="width: 1500px;height:300px;border:1px solid #aaa;position: relative;">
    <div style="height:100%;width:100%;position:absolute;z-index:9;overflow:auto;">
      <div id="main" style="width:130%;height:100%;"></div>
    </div>
    <ul class="left">
      <li>任务</li>
      <li>撰写总报告</li>
      <li>任务三</li>
      <li>任务二</li>
      <li>任务一</li>
      <li>项目启动</li>
    </ul>
    <div class="name">任务名称</div>
    <div class="line">2022年1月</div>
  </div>
  <div id="echart" style="width:800px;height:300px"></div>
  <script>
    let projectItem = ['项目启动', '任务一', '任务二', '任务三', '撰写总报告', '任务'], //任务名称
      projectItemStart = ['2022-01-01', '2022-01-03', '2022-01-10', '2022-01-16', '2022-01-19', ""]//每个项目的启始时间
      projectItemEnd = ['2022-01-05', '2022-01-12', '2022-01-16', '2022-01-19', '2022-01-22', ""];//每个项目的结束时间
    dateSecond = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29",'30' ];

    let projectItemStartValue = projectItemStart.map((item) => {
      return new Date(item).valueOf()
    })
    let maxDataValue = new Date("2022-01-31").valueOf()
    console.log(maxDataValue)
    let projectItemEndValue = projectItemEnd.map((item) => {
      return new Date(item).valueOf()
    })
    let projectItemDuringValue = projectItemEnd.map((item, i) => {
      return new Date(item).valueOf() - projectItemStartValue[i]
    })
    var left = document.querySelector(".left")
    let dateMin = projectItemStartValue.sort()[0];//最小时间
    console.log(dateMin)
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
      // backgroundColor:'yellowgreen',
      // title: {
      //   text: '甘特图',
      //   subtext: '瀑布图转为甘特图'
      // },

      tooltip: {
        trigger: 'axis',
        formatter: function (params) {
          // console.log(params)
          // let index = params[1].dataIndex
          if (params) {
            var tar = params[1];
            return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value / (1000 * 60 * 60 * 24) + '天';
          }
        }
      },
      grid: {
        left: '-20rpx',
        right: '0',
        bottom: '0',
        top: '10px',
        containLabel: true,
      },
      // dataZoom : [
      //     {
      //       type: 'inside',
      //      // zoomLock:true,
      //       show: true,
      //       start: 0,
      //       end: 80,
      //     //  xAxisIndex:0,
      //     },
      //     // {
      //     //   type: 'inside',
      //     //   zoomLock:true,
      //     //   show: true,
      //     //   start: 0,
      //     //   end: 80,
      //     //   xAxisIndex:1,
      //     // }
      //   ],

      yAxis: {
        type: 'category',
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: { //坐标轴刻度标签的相关设置。
          // formatter:'{value}(万元)', 
          color: '#444',
          fontSize: 12,
          margin: 40, //刻度标签与轴线之间的距离。
          left: 0, //整个echart位置
          textStyle: {
            align: 'center' //** 
          }
        },
        // 删除 axisLabel 显示刻度
        //  axisLabel : {
        //       formatter: function(){
        //             return "";
        //       }
        //   },
        splitArea: {
          show: false,
          areaStyle: {
            color: [
              'rgba(12,23,34,0.3)',
              'rgba(10,53,54,0.6)',
              'black',
              'red',
              'rgba(20,123,5,0.6)',
            ]
          }
        },
        data: projectItem
      },
      xAxis: [{
          type: "value",
          position: "top",
          show: false,
          // show: true,
          // interval: 0,
          // //boundaryGap: false,
          max: maxDataValue,
          //boundaryGap : [ 0.2, 0.2 ]
          axisLine: {
            show: false
          },
          min: dateMin
        },
        {
          type: "category",
          position: "top",
          interval: 0,
          show: true,
          //boundaryGap: false,
          axisLine: {
            show: true
          },
          axisLabel: {
            margin: 5,
          },
          splitLine: {
            show: true,
            lineStyle: {
              // type: 'dashed', //默认实线，dashed虚线
              width: 1,
              color: '#aaa',
            }
          },
          axisTick: {
            length: 25,
          },
          data: dateSecond
        },

      ],

      series: [{
          name: 'Placeholder',
          type: 'bar',
          stack: 'Total',
          itemStyle: {
            borderColor: 'transparent',
            color: 'transparent'
          },
          emphasis: {
            itemStyle: {
              borderColor: 'transparent',
              color: 'transparent'
            }
          },
          data: projectItemStartValue
        },
        {
          name: '周期',
          type: 'bar',
          stack: 'Total',

          itemStyle: {

            normal: {
              label: {
                show: true,

                //projectItem
                position: 'inside',
                formatter: function (params) {
                  console.log(params)
                  return projectItem[params.dataIndex % projectItem.length]
                },
              },

              barBorderRadius: [15, 15, 15, 15], //加入这个属性 
              borderColor: '#6883c4',
              color: function (params) {
                // console.log(params)
                var color = ['#2b6df9', '#1f8fd7', '#6d4ef7', "#2c6efa", "#208fd7"]
                return color[params.dataIndex % color.length]

              }
            },

          },
          emphasis: {
            itemStyle: {
              borderColor: '#fff',
              color: '#1e5add',
            }
          },
          data: projectItemDuringValue
        }
      ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  </script>

</body>

</html>